import { Avatar, Popconfirm, Tag, type PopconfirmProps } from "antd";
import style from "./Header.module.css";
import { successMsg } from "../utils/message";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import type { RootState } from "../store";

const HeaderContent = () => {
  const navigate = useNavigate();
  const userInfo = useSelector((state: RootState) => state.user)
  const confirm: PopconfirmProps["onConfirm"] = (e) => {
    successMsg("退出成功")
    localStorage.clear()
    navigate('/login', { replace: true })
  };

  return (
    <div className={style.container}>
      <div className={style.avatar}>
        <Avatar.Group>
          <Avatar src={ userInfo.userInfo?.avatar } />
        </Avatar.Group>
      </div>
      <div style={{ margin: '0px 10px 0px 10px' }}>{ userInfo.userInfo?.username }</div>
      <Popconfirm
        title="你确定退出登录吗？"
        onConfirm={confirm}
        okText="确定"
        cancelText="取消"
      >
        <Tag color="magenta" style={{ cursor: "pointer" }}>
          退出登录
        </Tag>
      </Popconfirm>
    </div>
  );
};

export default HeaderContent;
